<template>
  <div class="page adaofu-weekly">
    <div class="container" :style="bg">
      <div class="chart">
        <div class="chart-title">我的香氛店经营周报</div>
        <div class="chart-detail">
          <canvas class="canvas" canvas-id="canvasId"></canvas>
        </div>
        <div class="chart-label">七日营业额变化趋势</div>
      </div>
      <div class="detail">
        <p>上周访客数量：{{report.visitor}}</p>
        <p>上周创收鲜花数量：{{report.flowers}}</p>
        <p>全部排名：{{report.allrank}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { sourceDomain } from '@/utils/constant'
import mixins from 'comp/mixins'

export default {
  mixins: [mixins],
  components: {},
  data () {
    return {
      icons: {
        bg: `${sourceDomain}/bg7.png`
      },
      chartConfig: {
        list: [],
      },
      report: {}
    }
  },
  computed: {
    bg () {
      return `background-image: url(${this.icons.bg});`
    }
  },
  async mounted () {
    this.resetData()
    await this.getLast7Statistic()
    this.initChart()
    this.getReportStatistic()
  },
  methods: {
    // 初始化折线图
    initChart () {
      const ctx = wx.createCanvasContext('canvasId')
      this.drawCharts(ctx)
    },
    // 画折线
    drawCharts (ctx) {
      ctx.beginPath()
      ctx.setLineWidth(2)
      ctx.setStrokeStyle('#ffffff')
      // 将y轴反转
      ctx.translate(0, this.getPx(320))
      ctx.scale(1, -1)

      const list = this.checkMax(this.chartConfig.list)

      for (let i = 0; i < list.length; i++) {
        // canvas总宽度590，7天*80，剩余边距30
        const x = this.getPx(80) * (i + 1) // 计算X坐标
        const y = list[i] // 计算Y坐标
        if (i === 0) {
          ctx.moveTo(x, y)
        } else {
          ctx.lineTo(x, y)
        }
      }

      ctx.stroke()
      ctx.draw(true)
    },
    /**
     * 获取屏幕自适应宽度
     * @param w 物理像素值
     */
    getPx (w) {
      let real = 0
      try {
        const res = wx.getSystemInfoSync().windowWidth // 以宽度750px设计做宽度的自适应
        real = Math.floor(res / 750 * w)
        return real
      } catch (e) {
        return false
      }
    },
    /**
     * 检查高度峰值，限制canvas高度
     */
    checkMax (list) {
      let max = 0
      let ratio = 1
      let newList = []
      const canvasHeight = this.getPx(320) // 350-30

      for (let i = 0; i < list.length; i++) {
        if (list[i] > max) {
          max = list[i]
        }
      }
      // 当数组最大值大于canvasHeight时，则算出最大值和canvas高度的比例
      if (max > canvasHeight) {
        ratio = max / canvasHeight
      }
      for (let i = 0; i < list.length; i++) {
        newList[i] = list[i] / ratio
      }
      return newList
    },
    async getLast7Statistic () {
      const ret = await this.$store.dispatch('getLast7Statistic')
      let output = []
      const list = ret.data || {}
      for (let i = 0; i < list.length; i++) {
        output = output.concat(list[i].flowers)
      }
      this.chartConfig.list = output
    },
    /**
     * 获取统计数据
     */
    async getReportStatistic () {
      const ret = await this.$store.dispatch('getReportStatistic')
      this.report = ret.data
    }
  }
}
</script>

<style lang="less" scoped>
.adaofu-weekly {
  .container {
    position: relative;
    min-height: 100%;
    min-height: 100vh;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .chart {
    width: 590rpx;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -374rpx;
    margin-left: 80rpx;
    &-title {
      font-size: 37rpx;
      color: #5b4329;
      font-weight: bold;
    }
    &-label {
      font-size: 30rpx;
      color: #3f221a;
    }
    &-detail {
      display: flex;
      align-items: center;
      height: 350rpx;
      .canvas{
        width: 100%;
        height: 350rpx;
      }
    }
  }
  .detail {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: 286rpx;
    margin-left: 165rpx;
    p {
      font-size: 32rpx;
      color: #260000;
      line-height: 54rpx;
    }
  }
}
</style>
